<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <style>

    </style>
    <meta charset="UTF-8">
    <title>用户评论</title>
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
</head>
<body>
<div id="app">
    <div id="_rate">
        <el-card>
            <el-descriptions class="margin-top" th:title="${shopName}" :column="3">
                <template slot="extra">
                    <el-button type="primary" size="small" @click="onSubmit()">提交评价</el-button>
                </template>
                <template v-for="orderItem in orderItemList">
                    <el-descriptions-item label="产品">{{orderItem.productName}}</el-descriptions-item>
                    <el-descriptions-item label="购买详情">{{orderItem.count}}x&emsp;￥{{orderItem.price}}</el-descriptions-item>
                    <el-descriptions-item label="">
                        &emsp;
                    </el-descriptions-item>
                </template>
                <el-descriptions-item label="评价">
                    <el-input
                            type="textarea"
                            :rows="3"
                            placeholder="请输入内容"
                            v-model="comment">
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="评分">
                    <el-rate
                            v-model="value"
                            :colors="colors">
                    </el-rate>
                </el-descriptions-item>
            </el-descriptions>

        </el-card>
    </div>
</div>
<script th:inline="javascript">
    var app = new Vue({
        el: "#app",
        data: {
            orderId: [[${orderId}]],
            comment:'',
            value:'',
            colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
            orderItemList:[[${orderItemList}]]
        },
        methods: {
            onSubmit(){
                let _this=this
                let param ={
                    comment:_this.comment,
                    rate:_this.value,
                    orderId:_this.orderId
                }
                console.log(param)
                $.post("/comment/insertComment",param,function (data){
                    if (data==="ok"){
                        alert("感谢您的评价");
                        location.href="/order.html"
                    }
                })
            }
        }
        ,
        created(){
        }
    });
</script>
</body>
</html>
